<template>
    <div class="article_list">
        <ArticleItem v-for="(item, i) in articleList" :key="i" v-bind="item" />
    </div>
    <Paging :total="totals" @currenthange="handleCurrenthange" :page-num="pageNum" :pagesize="5" />
</template>
 

<script lang="ts" setup>
import ArticleItem from '@/components/home/articleItem.vue';
import Paging from '@/components/home/paging.vue';
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import type Article from '@/components/home/type/article'
import { getArticleList } from '@/api/api'

const router = useRoute();
const articleList = ref<Article[]>();
const categoryid = ref();
const totals = ref<number>();
const pageNum = ref(1);

watch(router, () => {
    categoryid.value = router.params.categoryid
    pageNum.value = 1;
    getArticles();
})

async function getArticles() {
    const res = await getArticleList({
        pageNum: pageNum.value,
        categoryid: categoryid.value
    });
    articleList.value = res.data.rows
    totals.value = res.data.total
}

getArticles();

function handleCurrenthange(value: number) {
    pageNum.value = value;
    getArticles();
}

</script>

<style lang="less" scoped>
.article_list {
    padding: 50px 0;
}
</style>